<script setup lang="ts">
import { ref } from 'vue'

// 价格套餐
const plans = [
  {
    name: '基础版',
    price: '免费',
    description: '适合个人用户和小型团队',
    features: [
      '基础对话功能',
      '每日 100 次对话限制',
      '基础知识库支持',
      '邮件支持',
      '社区支持'
    ],
    buttonText: '开始使用',
    popular: false
  },
  {
    name: '专业版',
    price: '¥299/月',
    description: '适合成长中的企业',
    features: [
      '高级对话功能',
      '无限制对话次数',
      '高级知识库支持',
      'API 接口访问',
      '优先技术支持',
      '数据分析功能',
      '自定义模型训练'
    ],
    buttonText: '立即购买',
    popular: true
  },
  {
    name: '企业版',
    price: '联系销售',
    description: '适合大型企业',
    features: [
      '所有专业版功能',
      '专属客户经理',
      '定制化开发',
      '私有化部署',
      'SLA 保障',
      '安全审计',
      '培训服务'
    ],
    buttonText: '联系我们',
    popular: false
  }
]

// 常见问题
const faqs = [
  {
    question: '如何选择合适的套餐？',
    answer: '您可以根据团队规模、使用场景和预算来选择。基础版适合个人用户，专业版适合成长中的企业，企业版适合大型企业。'
  },
  {
    question: '可以随时升级或降级套餐吗？',
    answer: '是的，您可以随时升级或降级套餐。升级立即生效，降级将在当前计费周期结束后生效。'
  },
  {
    question: '是否提供退款服务？',
    answer: '我们提供 7 天无理由退款保证。如果您对服务不满意，可以在购买后 7 天内申请全额退款。'
  },
  {
    question: '如何获取技术支持？',
    answer: '基础版用户可以通过社区获取支持，专业版和企业版用户可以获得优先技术支持。'
  }
]

// 价格计算
const calculatePrice = (plan: any) => {
  if (plan.price === '免费') return 0
  if (plan.price === '联系销售') return null
  return parseInt(plan.price.replace(/[^0-9]/g, ''))
}

// 选择套餐
const selectPlan = (plan: any) => {
  if (plan.name === '企业版') {
    // 跳转到联系页面
    window.location.href = '/contact'
  } else {
    // 跳转到注册页面
    window.location.href = '/register'
  }
}
</script>

<template>
  <div class="pricing">
    <!-- 价格头部 -->
    <section class="pricing-header">
      <div class="container">
        <h1>选择适合您的套餐</h1>
        <p>灵活的定价方案，满足不同规模企业的需求</p>
      </div>
    </section>

    <!-- 价格套餐 -->
    <section class="plans">
      <div class="container">
        <div class="plans-grid">
          <div v-for="plan in plans" :key="plan.name" 
               :class="['plan-card', { 'popular': plan.popular }]">
            <div v-if="plan.popular" class="popular-badge">最受欢迎</div>
            <div class="plan-header">
              <h3>{{ plan.name }}</h3>
              <div class="price">{{ plan.price }}</div>
              <p>{{ plan.description }}</p>
            </div>
            <ul class="features-list">
              <li v-for="feature in plan.features" :key="feature">
                <span class="check">✓</span>
                {{ feature }}
              </li>
            </ul>
            <button class="btn-select" @click="selectPlan(plan)">
              {{ plan.buttonText }}
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- 常见问题 -->
    <section class="faq">
      <div class="container">
        <h2>常见问题</h2>
        <div class="faq-grid">
          <div v-for="(faq, index) in faqs" :key="index" class="faq-item">
            <h3>{{ faq.question }}</h3>
            <p>{{ faq.answer }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 行动召唤 -->
    <section class="cta">
      <div class="container">
        <h2>需要定制化方案？</h2>
        <p>我们的销售团队随时为您提供专业建议</p>
        <button class="btn-contact" @click="selectPlan({ name: '企业版' })">
          联系销售
        </button>
      </div>
    </section>
  </div>
</template>

<style scoped>
.pricing {
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* 价格头部样式 */
.pricing-header {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  padding: 6rem 0;
  text-align: center;
}

.pricing-header h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.pricing-header p {
  font-size: 1.25rem;
  opacity: 0.9;
}

/* 价格套餐样式 */
.plans {
  padding: 5rem 0;
  background: #f8f9fa;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.plan-card {
  background: white;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s ease;
}

.plan-card:hover {
  transform: translateY(-5px);
}

.plan-card.popular {
  border: 2px solid #007bff;
}

.popular-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: #007bff;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
}

.plan-header {
  text-align: center;
  margin-bottom: 2rem;
}

.plan-header h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1rem;
}

.price {
  font-size: 2.5rem;
  font-weight: bold;
  color: #007bff;
  margin-bottom: 0.5rem;
}

.plan-header p {
  color: #666;
  font-size: 0.875rem;
}

.features-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.features-list li {
  padding: 0.75rem 0;
  color: #666;
  display: flex;
  align-items: center;
}

.check {
  color: #007bff;
  margin-right: 0.5rem;
  font-weight: bold;
}

.btn-select {
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 5px;
  background: #007bff;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-select:hover {
  background: #0056b3;
}

/* 常见问题样式 */
.faq {
  padding: 5rem 0;
  background: white;
}

.faq h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #333;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.faq-item {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 10px;
}

.faq-item h3 {
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 1rem;
}

.faq-item p {
  color: #666;
  line-height: 1.6;
}

/* 行动召唤样式 */
.cta {
  padding: 5rem 0;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  text-align: center;
}

.cta h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.cta p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.btn-contact {
  padding: 1rem 3rem;
  border: 2px solid white;
  border-radius: 5px;
  background: transparent;
  color: white;
  font-size: 1.25rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-contact:hover {
  background: white;
  color: #007bff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pricing-header {
    padding: 4rem 0;
  }

  .pricing-header h1 {
    font-size: 2.5rem;
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }
}
</style> 